<template>
<el-row :gutter="20" type="flex" class="row-bg indexcon" justify="center">
  <el-col :xs="18" :sm="18" :md="12">
    <router-link to="/">
    <div class="title1" >
   <el-button type="success" @click="setlabel(0)"><i class="el-icon-star-off"></i>话题广场</el-button>
    </div>
    </router-link>
    <div class="clearfix"></div>
    <ul class="content-block clearfix">
    <li v-for="label in this.$store.state.label.labels">
    <router-link to="/">
    <el-button  type="primary" size="mini"  @click="setlabel(label.labelid)">标签{{label.labelid}}:{{label.labelname}}</el-button>
    </router-link>
    </li>
    </ul>
    
    <div class="clearfix hr"></div>
    <div v-if="this.$store.state.pool.labelid==0">
    <div class="item-list clearfix">
    <div class="item" v-for="pool in this.$store.state.pool.pools" >
      <div class="blk"  >
      <router-link to="/pool">
        <a target="_blank">
        <img src="/src/assets/game.png" alt="游戏">
        <strong @click="setpool(pool.poolid,pool.labelid,pool.name)">{{pool.name}}</strong>
        </a>
        <el-button class="follow" size="mini" @click="setpool(pool.poolid,pool.labelid,pool.name)"><i class="el-icon-plus"></i>进入池子</el-button>
        </router-link>
      </div>
    </div>
    </div>
    </div>

    <div v-else>
    <div class="item-list clearfix">
    <div class="item" v-for="pool in this.$store.state.pool.pools" v-if="pool.labelid==nowlabel">
      <div class="blk"  >
      <router-link to="/pool">
        <a target="_blank">
        <img src="/src/assets/game.png" alt="游戏">
        <strong @click="setpool(pool.poolid,pool.labelid,pool.name)">{{pool.name}}</strong>
        </a>

        <el-button class="follow" size="mini" @click="setpool(pool.poolid,pool.labelid,pool.name)"><i class="el-icon-plus"></i>进入池子</el-button>
        </router-link>
      </div>
    </div>
    </div>
    </div>

  </el-col>

  <el-col :xs="6" :sm="6">
<div >
 <div class="tablehead">热门池子</div>
<div class="item-list clearfix">
    <div class="item" v-for="pool in this.toppool" >
    <router-link to="/pool">
         <el-button :plain="true" class="bt-pool" type="info" @click="setpool(pool.poolid,pool.labelid,pool.name)">{{pool.name}}</el-button>
    </router-link>
    </div>
    </div>
</div>
    
    <div class="tablehead">活跃用户</div>
    <el-table
    :data="topuser"
    stripe
    style="width: 100%"
    :show-header="false"
    >
        <el-table-column
        prop="gold"
        label="">
        </el-table-column>
        <el-table-column
        prop="email"
        label="">
        </el-table-column>
    </el-table>
    </el-col>
</el-row>
</template>

<script>
import axios from 'axios'
import store from './vuex/store'

const myApi = axios.create({
  baseURL: 'http://localhost:8081',
  withCredentials: true,
  headers: {
    'Accept' : 'application/json',
    'Content-Type': 'application/json',
  }
});

  export default {
    data() {
      return {
        data: {
        pools: [],
        newpool: '',
        newpooluid: '',
        },
        toppool:[],
        topuser:[],
        nowlabel: '',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods:{
      setlabel(a){
        this.$store.dispatch('setlabel' , { 
                      'label' : a,
                      });
       this.nowlabel=this.$store.state.pool.labelid;
      },
      setpool(a,b,c){
        this.$store.dispatch('setpool' , { 
                      'pool' : a,
                      });
         this.$store.dispatch('setlabel' , { 
                     'label' : b,
                     });
        this.$store.dispatch('setname' , { 
                     'name' : c,
                     });

      }
    },
    created: function() {
        // GET 

        var thisVue = this;
        this.nowlabel=this.$store.state.pool.labelid;


        myApi.get('/label/findAll').then(response => {
            thisVue.$store.dispatch('getlable' , { 
                      'labels' : response.data,
                      });
        }, response => {
        });

        myApi.get('/pool/getall').then(response => {
            this.data.pools = response.data;
            thisVue.$store.dispatch('getpool' , { 
                      'pools' : response.data,
                      });
        }, response => {
        });

        myApi.get('/pool/getTop5Pools').then(response => {
            this.toppool = response.data;
        }, response => {
        });
        myApi.get('/user/getTop5Members').then(response => {
            this.topuser = response.data;
        }, response => {
        });

        
    }
  }
</script>

<style>
.indexcon{
    margin-top:25px;
}
.tablehead {
    position: relative;
    border: #dfe6ec solid 1px;
    background-color: #eef1f6;
    border-bottom: none;
    height: 40px;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 40px;
    color:#888;
}
.el-table{
    margin-bottom: 25px;
}
.content-block{
  padding: 0;
}
.clearfix:before, .clearfix:after {
  display: table;
  content: "";
}
.clearfix:after{
  clear:both;
}
.hr {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  margin-top:-10px;
}
.content-block li {
  float: left;
  margin: 0 10px 10px 0;
  list-style: none
}
.el-tag--gray {
  font-size:14px;
  transition: .2s cubic-bezier(.645, .045, .355, 1);
  /*transition: border-color .2s cubic-bezier(.645, .045, .355, 1);*/
  /*transition: color .2s cubic-bezier(.645, .045, .355, 1);*/
}
.el-tag--gray:hover{
  background-color: rgba(32, 160, 255, .1);
  /*border-color: rgba(32, 160, 255, .2);*/
  color: #20a0ff;
}
.title1{
  color: #888;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.item-list{
  font-size:14px;
  display: block;
}
.item{
  position: relative;
  float: left;
  width: 50%;
  list-style: none;
  border-bottom: 1px dotted #eee;
  color: #48576a;
}
.item .blk{
  padding-left: 62px;
  margin: 18px 15px 18px 0;
}
.item img{
  position: absolute;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 3px;
}
.item a strong{
  display: inline-block;
  height: 1.5em;
  word-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1D8CE0;
}
.item p {
  height: 40px;
  color: #1f2d3d;
  font-size: 13px;
  overflow: hidden;
  margin:0;
  padding:0;
}
.item .follow{
  position: absolute;
  top: 16px;
  right: 18px;
}
.item .follow i{
  font-size: 0.79em;
}
a {
  text-decoration: none;
}
.bt-pool{
  width: 100%; 
  height: auto;
}
</style>
